<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
import { apiGet, apiPost, apiPatch } from '@/request/apiUtils';
import axios from 'axios';
import moment from 'moment';
import { ElMessage } from 'element-plus'
const formatDate = (d: any) => moment(d).format('YYYY-MM-DD');

const if_extension_list: TObj = {
    1: '是',
    0: '否',
}

// 任务状态选项
const statusOptions = ref([] as string[])

// 责任人选项
const responsiblePersonOptions = ref([] as string[])
const filteredResponsiblePersonOptions = ref([] as string[])
// 产品经理选项
const productManagerOptions = ref<string[]>([]);
const filteredProductManagerOptions = ref<string[]>([]);
const taskTypeOptions = ref<string[]>([]);
const initQuery = {
    task_id: undefined,
    epic_name: undefined,
    story_name: undefined,
    task_name: undefined,
    task_type: undefined,
    fc_responsible_person: undefined,
    project: undefined,
    status: undefined,
    fc_publish_version: undefined,
    product_manager: undefined,
    task_data: undefined,
};
const initForm = {
      id: null,
      task_id: null,
      epic_name: null,
      story_name: null,
      fc_publish_version: null,
      product_manager: null,
    task_name: null,
    task_type: null,
    project: null,
    status: null,
    fc_responsible_person: null,
    estimate_time: null,
    fc_plan_start_time: null,
    fc_plan_end_time: null,
    fc_actual_start_time: null,
    fc_actual_end_time: null,
}
const { value: state } = ref({
    loading: false,
    tableData: [] as TObj[],
    total: 0,
    pageSize: 10,
    currentPage: 1,
    queryData: { ...initQuery },
    maxtime: "",
    mintime: "",
    gantter_status: false,
    table_span: 24,
    gantt_span: 12,
    showDialog: false,
    isCreate: false,
    form: { ...initForm },
    dialogLoading: false,
    total_hours: 0  // 任务工时总和
});


const myBarList = ref([] as TObj[])
const startTime = ref([] as TObj[])
const endTime = ref([] as TObj[])
const tableRef = ref(null)
const ganttRef = ref(null)

// 获取责任人列表
const fetchResponsiblePersons = async () => {
    try {
        const response: TObj = await apiGet('/tasks/responsible_persons');
        responsiblePersonOptions.value = response?.results || [];
        filteredResponsiblePersonOptions.value = response?.results || [];
    } catch (error) {
        console.error('Error fetching responsible persons:', error);
    }
}

// 获取产品经理列表
const fetchProductManagers = async () => {
    try {
        const response: TObj = await apiGet('/tasks/product_managers');
        productManagerOptions.value = response?.results || [];
        filteredProductManagerOptions.value = response?.results || [];
    } catch (error) {
        console.error('Error fetching product managers:', error);
    }
}

// 获取任务状态列表
const fetchTaskStatuses = async () => {
    try {
        const response: TObj = await apiGet('/tasks/task_statuses');
        statusOptions.value = response?.results || [];
    } catch (error) {
        console.error('Error fetching task statuses:', error);
    }
}

// 获取任务类型列表
const getTaskTypes = async () => {
    try {
        const response: TObj = await apiGet('/tasks/task_types');
        taskTypeOptions.value = response?.results || [];
    } catch (error) {
        console.error('获取任务类型列表失败:', error);
    }
}

const fetchData = async (page = state.currentPage, size = state.pageSize) => {
    state.loading = true;
    try {
        const apiUrl = '/tasks';
        
        // 重新构建查询参数
        const params: TObj = {
            page,
            size
        };
        
        // 添加所有非空查询参数
        Object.keys(state.queryData).forEach(key => {
            const value = state.queryData[key];
            // 只添加非undefined、非null、非空字符串的参数
            if (value !== undefined && value !== null && value !== '') {
                if (key === 'task_data' && Array.isArray(value) && value.length === 2) {
                    // 处理日期范围
                    params.task_start_data = formatDate(value[0]);
                    params.task_end_data = formatDate(value[1]);
                } else if (key === 'task_type' && Array.isArray(value) && value.length > 0) {
                    // 处理多选任务类型，将数组转换为逗号分隔的字符串
                    params[key] = value.join(',');
                } else if (key === 'status' && Array.isArray(value) && value.length > 0) {
                    // 处理多选状态，将数组转换为逗号分隔的字符串
                    params[key] = value.join(',');
                } else if (key === 'fc_responsible_person' && Array.isArray(value) && value.length > 0) {
                    // 处理多选责任人，将数组转换为逗号分隔的字符串
                    params[key] = value.join(',');
                } else if (key === 'product_manager' && Array.isArray(value) && value.length > 0) {
                    // 处理多选产品经理，将数组转换为逗号分隔的字符串
                    params[key] = value.join(',');
                } else if (key !== 'task_data') {
                    params[key] = value;
                }
            }
        });
        
        console.log('查询参数:', params);
        const response: TObj = await apiGet(apiUrl, params);
        state.tableData = response?.results || [];
        state.total = response?.count || 0;
        state.total_hours = response?.total_hours || 0;

        myBarList.value = []
        startTime.value = []
        endTime.value = []
        // 确保甘特图行数和表格行数一一对应
        for (let i in state.tableData) {
            let startDate = state.tableData[i]['fc_plan_start_time'];
            let endDate = state.tableData[i]['fc_plan_end_time'];

            // 将结束日期设置为结束日期的下一天 00:00，确保包含结束日期整天
            // 例如：2025-10-17 到 2025-10-18，应该显示为 2025-10-17 00:00 到 2025-10-19 00:00
            // 这样就能完整显示17日和18日两天
            let endDateForGantt = endDate;
            if (endDate) {
                endDateForGantt = moment(endDate).add(1, 'days').format('YYYY-MM-DD');
            }

            // 无论是否有日期，都要为每一行数据创建对应的甘特图行，确保一一对应
            const bar = [{
                myBeginDate: startDate ? startDate + " 00:00" : null,
                myEndDate: endDateForGantt ? endDateForGantt + " 00:00" : null,
                ganttBarConfig: {
                    id: state.tableData[i]['task_id'] || '',
                    label: state.tableData[i]['task_name'] || ''
                }
            }]

            // 收集日期用于计算时间范围
            if (state.tableData[i]['fc_plan_start_time'] != null) {
                startTime.value.push(state.tableData[i]['fc_plan_start_time'])
            }
            if (state.tableData[i]['fc_plan_end_time'] != null) {
                endTime.value.push(state.tableData[i]['fc_plan_end_time'])
            }

            // 每一行都要添加到甘特图，确保和表格行一一对应
            myBarList.value.push(bar)
        }
        console.log('myBarList', myBarList)
        if (endTime.value.length != 0 && startTime.value.length != 0) {
            state.maxtime = moment(endTime.value.sort()[endTime.value.length - 1] + " 00:00").add(5, 'days').format('YYYY-MM-DD') + " 00:00";
            state.mintime = startTime.value.sort()[0] + " 00:00";
        } else {
            state.maxtime = moment().add(5, 'days').format('YYYY-MM-DD') + " 00:00";
            state.mintime = moment().format('YYYY-MM-DD') + " 00:00";
        }
        console.log('state.mintime', state.mintime)
        console.log('state.maxtime', state.maxtime)

        // 绑定滚动事件
        bindScrollEvents();

    } catch (error) {
        console.error('Error fetching data:', error);
    }
    state.loading = false;
};

// 页数改变
const handleSizeChange = (val: number) => {
    state.pageSize = val;
    fetchData(state.currentPage, val);
};
const handleCurrentChange = (val: number) => {
    state.currentPage = val;
    fetchData(val, state.pageSize);
};

// 重置
const handleReset = () => {
    // console.log('initQuery', initQuery);
    state.queryData = { ...initQuery };
    fetchData()
};
// 查询
const handleSearch = () => {
    fetchData()
};

const hanleChangeGatter = () => {
    state.gantter_status = !state.gantter_status
    if (state.gantter_status) {
        state.table_span = 8;
        state.gantt_span = 16;
    } else {
        state.table_span = 24;
        state.gantt_span = 0;
    }
};

// 编辑
const handleEdit = (rowItem: TObj) => {
    state.showDialog = true;
    state.isCreate = false;
    state.form = { ...rowItem };
}

// 新增
const handleCreate = () => {
    state.showDialog = true;
    state.isCreate = true;
    state.form = { ...initForm };
}

// 关闭弹窗
const handleClose = () => {
    state.showDialog = false;
    state.dialogLoading = false
}

// 删除
const handleDelete = async (rowItem: TObj) => {
    try {
        const apiUrl = `/tasks/${rowItem.id}/`;
        const response = await fetch(apiUrl, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
            }
        });
        if (response.ok) {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            fetchData(state.currentPage, state.pageSize);
        } else {
            throw new Error('删除失败');
        }
    } catch (error) {
        console.error(error);
        ElMessage({
            message: '删除失败',
            type: 'error',
        })
    }
}

// 弹窗确定
const handleConfirm = async () => {
    state.dialogLoading = true;
    try {
        if (state.isCreate) {
            const apiUrl = `/tasks/`;
            await apiPost(apiUrl, state.form);
            ElMessage({
                message: '新增成功',
                type: 'success',
            })
        } else {
            const apiUrl = `/tasks/${state.form.id}/`;
            await apiPatch(apiUrl, state.form);
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
        }
        state.form = { ...initForm }
        state.showDialog = false
        fetchData(state.currentPage, state.pageSize);
    } catch (error) {
        console.error(error);
    }
    state.dialogLoading = false
}

// 获取表格行样式，确保行高和甘特图一致
const getRowStyle = () => {
    return {
        backgroundColor: '#cce4fa',
        height: '86px',
        lineHeight: '86px'
    };
};

let isScrolling = false;

// 同步滚动：表格滚动时，甘特图也滚动
const handleTableScroll = () => {
    if (isScrolling) return;
    isScrolling = true;

    nextTick(() => {
        if (tableRef.value && ganttRef.value) {
            const tableBody = (tableRef.value as any).$el?.querySelector('.el-table__body-wrapper') as HTMLElement;
            const ganttContainer = ganttRef.value.querySelector('.gantt-chart-container') as HTMLElement;

            if (tableBody && ganttContainer) {
                ganttContainer.scrollTop = tableBody.scrollTop;
            }
        }
        isScrolling = false;
    });
};

// 同步滚动：甘特图滚动时，表格也滚动
const handleGanttScroll = () => {
    if (isScrolling) return;
    isScrolling = true;

    nextTick(() => {
        if (tableRef.value && ganttRef.value) {
            const tableBody = (tableRef.value as any).$el?.querySelector('.el-table__body-wrapper') as HTMLElement;
            const ganttContainer = ganttRef.value.querySelector('.gantt-chart-container') as HTMLElement;

            if (tableBody && ganttContainer) {
                tableBody.scrollTop = ganttContainer.scrollTop;
            }
        }
        isScrolling = false;
    });
};

// 在数据加载后绑定滚动事件
const bindScrollEvents = () => {
    nextTick(() => {
        if (tableRef.value && ganttRef.value) {
            const tableBody = (tableRef.value as any).$el?.querySelector('.el-table__body-wrapper') as HTMLElement;
            const ganttContainer = ganttRef.value.querySelector('.gantt-chart-container') as HTMLElement;

            if (tableBody) {
                tableBody.addEventListener('scroll', handleTableScroll);
            }
            if (ganttContainer) {
                ganttContainer.addEventListener('scroll', handleGanttScroll);
            }
        }
    });
};

onMounted(() => {
    fetchResponsiblePersons();
    fetchProductManagers();
    fetchTaskStatuses();
    getTaskTypes();
    fetchData();
});

// 责任人搜索过滤方法
const filterResponsiblePerson = (query: string) => {
    if (query) {
        filteredResponsiblePersonOptions.value = responsiblePersonOptions.value.filter(person =>
            person.toLowerCase().includes(query.toLowerCase())
        );
    } else {
        filteredResponsiblePersonOptions.value = [...responsiblePersonOptions.value];
    }
}

// 产品经理搜索过滤方法
const filterProductManager = (query: string) => {
    if (query) {
        filteredProductManagerOptions.value = productManagerOptions.value.filter(manager =>
            manager.toLowerCase().includes(query.toLowerCase())
        );
    } else {
        filteredProductManagerOptions.value = [...productManagerOptions.value];
    }
}

// 处理责任人下拉框显示/隐藏事件
const handleResponsiblePersonVisible = (visible: boolean) => {
    if (visible) {
        // 显示时重置过滤列表
        filteredResponsiblePersonOptions.value = [...responsiblePersonOptions.value];
    }
}

// 处理产品经理下拉框显示/隐藏事件
const handleProductManagerVisible = (visible: boolean) => {
    if (visible) {
        // 显示时重置过滤列表
        filteredProductManagerOptions.value = [...productManagerOptions.value];
    }
}
</script>

<template class="home-wrap">
    <div class="home-search">
        <div class="home-search-inner">
            <el-input v-model="state.queryData.task_id" placeholder="请输入任务ID" class="width200" />
            <el-input v-model="state.queryData.epic_name" placeholder="请输入史诗" class="width200" />
            <el-input v-model="state.queryData.story_name" placeholder="请输入故事" class="width200" />
            <el-input v-model="state.queryData.task_name" placeholder="请输入任务名称" class="width200" />
            <el-select v-model="state.queryData.task_type" placeholder="请选择任务类型" class="width200" multiple clearable collapse-tags>
                <el-option v-for="taskType in taskTypeOptions" :key="taskType" :label="taskType" :value="taskType" />
            </el-select>
            <el-select 
                v-model="state.queryData.fc_responsible_person" 
                placeholder="责任人" 
                class="width200" 
                multiple 
                clearable 
                collapse-tags
                collapse-tags-tooltip
                :max-collapse-tags="1"
                filterable
                :filter-method="filterResponsiblePerson"
                @visible-change="handleResponsiblePersonVisible">
                <el-option v-for="person in filteredResponsiblePersonOptions" :key="person" :label="person" :value="person" />
            </el-select>
            <el-input v-model="state.queryData.project" placeholder="请输入项目" class="width200" />
            <el-select v-model="state.queryData.status" placeholder="请选择任务状态" class="width200" multiple clearable collapse-tags>
                <el-option v-for="status in statusOptions" :key="status" :label="status" :value="status" />
            </el-select>
            <el-input v-model="state.queryData.fc_publish_version" placeholder="请输入版本" class="width200" />
            <el-select 
                v-model="state.queryData.fc_product_manager" 
                placeholder="产品经理" 
                class="width200" 
                multiple 
                clearable 
                collapse-tags
                collapse-tags-tooltip
                :max-collapse-tags="1"
                filterable
                :filter-method="filterProductManager"
                @visible-change="handleProductManagerVisible">
                <el-option v-for="person in filteredProductManagerOptions" :key="person" :label="person" :value="person" />
            </el-select>
            <div class="date-wrap">
                <el-date-picker v-model="state.queryData.task_data" type="daterange" range-separator="-"
                    start-placeholder="任务预计开始日期" end-placeholder="任务预计结束日期" />
            </div>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
            <el-button type="success" @click="handleCreate">新增</el-button>
            <el-button type="warning" @click="hanleChangeGatter">甘特图开关</el-button>
        </div>
    </div>

    <div class="statistics-wrap" style="margin-bottom: 10px; padding: 10px; background-color: #f0f9ff; border: 1px solid #bae7ff; border-radius: 4px;">
        <span style="color: #1890ff; font-weight: bold;">统计：任务工时总和: {{ state.total_hours.toFixed(2) }}</span>
    </div>
    
    <el-row>
        <el-col :span="state.table_span">
            <el-table ref="tableRef" :data="state.tableData" border style="width: 100%;" v-loading="state.loading"
                :header-cell-style="{ color: '#000', backgroundColor: '#61c5fc', height: '81px' }"
                :row-style="getRowStyle" :cell-style="{ padding: '8px 0', height: '86px', lineHeight: '86px' }">
                <el-table-column prop="operate" label="操作" width="140" fixed="left">
                    <template v-slot="scope">
                        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="task_id" label="任务ID" width="100" fixed="left" />
                <el-table-column prop="fc_responsible_person" label="责任人" width="120" fixed="left" />
                <el-table-column prop="epic_name" label="史诗" width="200" fixed="left" :show-overflow-tooltip="true" />
                <el-table-column prop="story_name" label="故事" width="300" fixed="left"
                :show-overflow-tooltip="true">
                    <template v-slot="scope">
                        <div class="ellipsis">{{ scope.row.story_name }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="task_name" label="任务名称" width="300" fixed="left" :show-overflow-tooltip="true">
                    <template v-slot="scope">
                        <div class="ellipsis">{{ scope.row.task_name }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="task_type" label="任务类型" width="100" />
                <el-table-column prop="project" label="项目" width="200" :show-overflow-tooltip="true">
                    <template v-slot="scope">
                        <div class="ellipsis">{{ scope.row.project }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="任务状态" width="100" />
                <el-table-column prop="fc_publish_version" label="版本" width="150" :show-overflow-tooltip="true">
                    <template v-slot="scope">
                        <div class="ellipsis">{{ scope.row.fc_publish_version }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="product_manager" label="产品经理" width="120" />
                <el-table-column prop="estimate_time" label="预计工时" width="100" />
                <el-table-column prop="fc_plan_start_time" label="任务预计开始日期" width="120" />
                <el-table-column prop="fc_plan_end_time" label="任务预计结束日期" width="120" />
                <el-table-column prop="fc_actual_start_time" label="任务实际开始日期" width="120" />
                <el-table-column prop="fc_actual_end_time" label="任务实际结束日期" width="120" />
            </el-table>
        </el-col>

        <el-col :span="state.gantt_span" v-if="state.gantter_status">
            <div class="gantt-wrapper" ref="ganttRef" style="height: 100%;">
                <div class="gantt-chart-container" @scroll="handleGanttScroll"
                    style="height: calc(100% - 81px); overflow: auto;">
                    <g-gantt-chart :chart-start="state.mintime" :chart-end="state.maxtime" precision="day"
                        row-height="86" width="100%" bar-start="myBeginDate" bar-end="myEndDate" grid="true"
                        current-time="true" locale="zh-CN">
                        <g-gantt-row v-for="(bar, index) in myBarList" :key="index" :bars="bar" style="height: 100%;" />
                    </g-gantt-chart>
                </div>
            </div>
        </el-col>

    </el-row>

    <div class="example-pagination-block">
        <span class="m-r-5 font-12">共 {{ state.total }}</span>
        <el-pagination v-model:currentPage="state.currentPage" v-model:page-size="state.pageSize"
            :page-sizes="[10,20, 50, 100]" size="small" :disabled="false" :background="false"
            layout="sizes, prev, pager, next" :total="state.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>

    <el-dialog v-model="state.showDialog" :title="state.isCreate ? '新增任务' : '编辑任务'" width="40%"
        :before-close="handleClose">
        <el-form ref="form" :model="state.form" label-width="100px" v-loading="state.dialogLoading">
            <el-form-item label="任务ID">
                <el-input v-model="state.form.task_id"></el-input>
            </el-form-item>
            <el-form-item label="史诗">
                <el-input v-model="state.form.epic_name"></el-input>
            </el-form-item>
            <el-form-item label="故事">
                <el-input v-model="state.form.story_name"></el-input>
            </el-form-item>
            <el-form-item label="版本">
                <el-input v-model="state.form.fc_publish_version"></el-input>
            </el-form-item>
            <el-form-item label="产品经理">
                <el-input v-model="state.form.product_manager"></el-input>
            </el-form-item>
            <el-form-item label="任务名称">
                <el-input v-model="state.form.task_name"></el-input>
            </el-form-item>
            <el-form-item label="任务类型">
                <el-select v-model="state.form.task_type" placeholder="请选择任务类型">
                    <el-option v-for="taskType in taskTypeOptions" :key="taskType" :label="taskType" :value="taskType" />
                </el-select>
            </el-form-item>
            <el-form-item label="项目">
                <el-input v-model="state.form.project"></el-input>
            </el-form-item>
            <el-form-item label="任务状态">
                <el-input v-model="state.form.status"></el-input>
            </el-form-item>
            <el-form-item label="责任人">
                <el-input v-model="state.form.fc_responsible_person"></el-input>
            </el-form-item>
            <el-form-item label="预计工时">
                <el-input-number :min="0" v-model="state.form.estimate_time"></el-input-number>
            </el-form-item>
            <el-form-item label="任务预计开始日期">
                <el-date-picker v-model="state.form.fc_plan_start_time" type="date" placeholder="请选择"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="任务预计结束日期">
                <el-date-picker v-model="state.form.fc_plan_end_time" type="date" placeholder="请选择" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="任务实际开始日期">
                <el-date-picker v-model="state.form.fc_actual_start_time" type="date" placeholder="请选择"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="任务实际结束日期">
                <el-date-picker v-model="state.form.fc_actual_end_time" type="date" placeholder="请选择"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="state.showDialog = false">取消</el-button>
                <el-button type="primary" @click="handleConfirm" :loading="state.dialogLoading">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style scoped>
.home-wrap {
    position: relative;
}

.home-search {
    height: auto;
    min-height: 60px;
    max-height: 100px;
    padding: 8px 0;
    position: relative;
    overflow: visible;
}

.home-search-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 0;
}

.statistics-wrap {
    margin: 8px 0; 
    padding: 6px 10px; 
    background-color: #f0f9ff; 
    border: 1px solid #bae7ff; 
    border-radius: 4px;
    position: relative;
    z-index: 100;
    clear: both;
    min-height: 20px;
    line-height: 20px;
}

.sta-wrap {
    display: flex;
    height: 20px;
    align-items: center;
    color: blue;
}

.width200 {
    width: 200px !important;
}

.home-search-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.home-table {
    height: calc(100vh - 210px);
}

.example-pagination-block {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: end;
}

.gantt-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gantt-chart-container {
    flex: 1;
    overflow: auto;
}

:deep(.el-table) {
    height: 100%;
}

:deep(.el-table__header-wrapper) {
    height: 81px;
}

:deep(.el-table__body-wrapper) {
    scrollbar-width: thin;
    height: calc(100% - 81px);
}

:deep(.el-table td) {
    padding: 0;
    height: 86px;
    line-height: 86px;
    box-sizing: border-box;
}

:deep(.el-table__body tr) {
    height: 86px !important;
    min-height: 86px !important;
}

:deep(.el-table__body td) {
    height: 86px !important;
    min-height: 86px !important;
    padding: 0 8px;
    box-sizing: border-box;
}


:deep(.g-gantt-row) {
    height: 86px !important;
    min-height: 86px !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
}

:deep(.g-gantt-bar) {
    top: 0px !important;
    height: 85px !important;
    margin-top: 0px !important;
}

:deep(.g-gantt-bar-label) {
    height: 85px !important;
    line-height: 85px !important;
    font-size: 14px;
}

:deep(.g-gantt-chart) {
    height: 100%;
}

:deep(.g-gantt-chart-content) {
    height: 100%;
}
</style>

:deep(.el-select__tags) {
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:deep(.el-select__tags > span) {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 简化方案：增加责任人和产品经理输入框宽度 */
:deep(.el-select) {
    height: 32px !important;
    line-height: 32px !important;
}

:deep(.el-select .el-input) {
    height: 32px !important;
    line-height: 32px !important;
}

:deep(.el-select .el-input__inner) {
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 8px !important;
}

:deep(.el-select .el-input__wrapper) {
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 8px !important;
}

/* 优化标签显示，减小标签尺寸 */
:deep(.el-select .el-select__tags .el-tag) {
    max-width: 70px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
    margin: 1px !important;
    padding: 0 3px !important;
    font-size: 11px !important;
    height: 18px !important;
    line-height: 16px !important;
}

:deep(.el-select .el-select__tags .el-select__tags-text) {
    max-width: calc(100% - 16px) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    font-size: 11px !important;
}

:deep(.el-select .el-select__tags .el-tag__close) {
    font-size: 11px !important;
    width: 12px !important;
    height: 12px !important;
    line-height: 10px !important;
    margin-left: 1px !important;
}

/* 选中项样式 */
:deep(.el-select .el-select__selected-item) {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    line-height: 18px !important;
    margin: 1px !important;
}

/* 悬停状态保持高度 */
:deep(.el-select:hover:not(.el-select--disabled)) .el-input__wrapper {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
}

/* small和default尺寸的tags容器 */
:deep(.el-select--small .el-select__tags) {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
}

:deep(.el-select--default .el-select__tags) {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
}
.width150 {
    width: 150px !important;
}

.width130 {
    width: 130px !important;
}

.width200 {
    width: 200px !important;
}

.width250 {
    width: 250px !important;
}
/* 添加确保高度固定的关键样式 */
:deep(.el-select .el-select__tags .el-tag:last-child) {
    max-width: calc(100% - 30px) !important;
}

/* 强制所有状态下的高度保持一致 */
:deep(.el-select.el-select--medium) {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
}

:deep(.el-select.el-select--medium .el-input__inner) {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    line-height: 32px !important;
}

/* 确保标签区域不会撑开高度 */
:deep(.el-select .el-select__tags) {
    position: absolute !important;
    top: 2px !important;
    left: 8px !important;
    right: 20px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    line-height: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    max-width: calc(100% - 28px) !important;
}

/* 输入框wrapper确保高度 */
:deep(.el-select .el-input.el-input--medium) {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
}

:deep(.el-select .el-input.el-input--medium .el-input__inner) {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    line-height: 32px !important;
}

/* 确保选择器内部高度一致 */
:deep(.el-select__wrapper) {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 8px !important;
}

/* 多选时的特殊处理 */
:deep(.el-select__multiple) {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    overflow: hidden !important;
}

/* 确保标签不会换行或撑开 */
:deep(.el-select__tags > span) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 100% !important;
    max-height: 28px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}
